import 'package:flutter/material.dart';

/*
这里如果不加key ，Box 状态会丢失:实测发现 打乱list 状态，颜色变化了，但是Box 里面的value 值不会变化

Key，初步使用，Box 顺序调整，引入key的使用；基本上每个widget 的 构造方法都有key 参数，但对于它们的使用却不常见。当widgets 在widget tree 上面移动的时候，keys可以保留 widget 的状态。
在实际使用过程中，意味着keys 对于保留用户的滚动状态或需要修改集合时保持状态很有用.

 */
class BoxKeyViewTest extends StatefulWidget {
  const BoxKeyViewTest({super.key});
  @override
  State<BoxKeyViewTest> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<BoxKeyViewTest> {
  List<Widget> list = [
    Box(color: Colors.blue, key: UniqueKey()),
    Box(color: Colors.red, key: UniqueKey()),
    Box(color: Colors.orange, key: UniqueKey())
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            list.shuffle(); //打乱list的顺序
          });
        },
        child: const Icon(Icons.refresh),
      ),
      appBar: AppBar(
        title: const Text('Title'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: list,
        ),
      ),
    );
  }
}

class Box extends StatefulWidget {
  Color color;
  Box({required Key key, required this.color}) : super(key: key);

  @override
  State<Box> createState() => _BoxState();
}

class _BoxState extends State<Box> {
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 100,
      width: 100,
      child: ElevatedButton(
        style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(widget.color)),
        onPressed: () {
          setState(() {
            _count++;
          });
        },
        child: Center(
          child: Text("$_count"),
        ),
      ),
    );
  }
}
